<template>
  <div class="lease-browse-container">
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">浏览租赁设备</h2>
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/official' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'LeaseManagement' }">租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>浏览设备</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- 搜索区域 -->
      <el-card class="search-card">
        <el-form :model="searchForm" ref="searchForm" :inline="true" size="small">
          <el-form-item label="设备名称">
            <el-input v-model="searchForm.name" placeholder="请输入设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备类别">
            <el-select v-model="searchForm.category" placeholder="请选择类别" clearable style="width: 180px;">
              <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格区间">
            <el-input-number v-model="searchForm.minPrice" :min="0" :step="100" controls-position="right" placeholder="最低价" size="small" style="width: 120px;"></el-input-number>
            <span style="margin: 0 5px;">-</span>
            <el-input-number v-model="searchForm.maxPrice" :min="0" :step="100" controls-position="right" placeholder="最高价" size="small" style="width: 120px;"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-group">
          <span class="filter-label">设备状态：</span>
          <el-radio-group v-model="filterForm.status" size="small" @change="handleFilter">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="可租">可租</el-radio-button>
            <el-radio-button label="已租完">已租完</el-radio-button>
            <el-radio-button label="维修中">维修中</el-radio-button>
          </el-radio-group>
        </div>
        <div class="filter-group">
          <span class="filter-label">排序方式：</span>
          <el-radio-group v-model="filterForm.sort" size="small" @change="handleFilter">
            <el-radio-button label="default">默认排序</el-radio-button>
            <el-radio-button label="priceAsc">价格从低到高</el-radio-button>
            <el-radio-button label="priceDesc">价格从高到低</el-radio-button>
            <el-radio-button label="newest">最新发布</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 设备列表 -->
      <el-row :gutter="20" class="equipment-list">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in equipmentList" :key="item.id" class="equipment-item">
          <el-card class="equipment-card" shadow="hover" @click.native="showDetail(item)">
            <div class="equipment-image">
              <img :src="item.imageUrl || defaultImage" alt="设备图片" />
              <div class="equipment-status" :class="getStatusClass(item.status)">{{ item.status }}</div>
            </div>
            <div class="equipment-info">
              <h3 class="equipment-name">{{ item.name }}</h3>
              <div class="equipment-category">{{ item.category }}</div>
              <div class="equipment-price">
                <span class="price-label">日租金：</span>
                <span class="price-value">¥{{ item.dailyPrice }}</span>
              </div>
              <div class="equipment-actions">
                <el-button size="small" type="primary" @click.stop="handleRent(item)" :disabled="item.status !== '可租'">
                  {{ item.status === '可租' ? '立即租赁' : '暂不可租' }}
                </el-button>
                <el-button size="small" type="info" @click.stop="showDetail(item)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[12, 24, 36, 48]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>

    <!-- 设备详情弹窗 -->
    <el-dialog title="设备详情" :visible.sync="detailDialogVisible" width="65%">
      <div class="equipment-detail" v-if="currentEquipment">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-carousel height="300px">
              <el-carousel-item v-for="(img, index) in currentEquipment.images || [currentEquipment.imageUrl]" :key="index">
                <img :src="img || defaultImage" class="detail-image" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12">
            <div class="detail-info">
              <h2 class="detail-name">{{ currentEquipment.name }}</h2>
              <div class="detail-item">
                <span class="detail-label">设备类别：</span>
                <span>{{ currentEquipment.category }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">日租金：</span>
                <span class="price-value">¥{{ currentEquipment.dailyPrice }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">押金：</span>
                <span>¥{{ currentEquipment.deposit }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">可租数量：</span>
                <span>{{ currentEquipment.available }}台</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">设备状态：</span>
                <el-tag :type="getStatusType(currentEquipment.status)">{{ currentEquipment.status }}</el-tag>
              </div>
              <div class="detail-item">
                <span class="detail-label">发布时间：</span>
                <span>{{ currentEquipment.publishTime || '2023-06-10' }}</span>
              </div>
              
              <div class="detail-actions">
                <el-button type="primary" size="medium" @click="handleRent(currentEquipment)" :disabled="currentEquipment.status !== '可租'">
                  {{ currentEquipment.status === '可租' ? '立即租赁' : '暂不可租' }}
                </el-button>
                <el-button type="warning" size="medium" @click="addToFavorite">收藏</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <div class="detail-section">
          <h3 class="section-title">设备描述</h3>
          <p class="section-content">{{ currentEquipment.description || '暂无描述' }}</p>
        </div>
        
        <div class="detail-section">
          <h3 class="section-title">租赁条款</h3>
          <p class="section-content">{{ currentEquipment.terms || '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用\n4. 归还时设备需保持良好状态' }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 租赁确认弹窗 -->
    <el-dialog title="租赁确认" :visible.sync="rentDialogVisible" width="500px">
      <el-form :model="rentForm" :rules="rentRules" ref="rentForm" label-width="100px">
        <el-form-item label="租赁数量" prop="quantity">
          <el-input-number v-model="rentForm.quantity" :min="1" :max="currentEquipment ? currentEquipment.available : 1"></el-input-number>
        </el-form-item>
        <el-form-item label="起租日期" prop="startDate">
          <el-date-picker v-model="rentForm.startDate" type="date" placeholder="选择起租日期" style="width: 100%;" :picker-options="startDateOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="租赁天数" prop="days">
          <el-input-number v-model="rentForm.days" :min="1" :max="90"></el-input-number>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="rentForm.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="rentForm.remark" rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
        
        <div class="rent-summary">
          <div class="summary-item">
            <span class="summary-label">租金总计：</span>
            <span class="summary-value">¥{{ calculateTotalRent() }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">押金总计：</span>
            <span class="summary-value">¥{{ calculateTotalDeposit() }}</span>
          </div>
          <div class="summary-item total">
            <span class="summary-label">需支付总额：</span>
            <span class="summary-value">¥{{ calculateTotalAmount() }}</span>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRent('rentForm')">确认租赁</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const defaultImage = require('@/assets/images/default.png');

export default {
  name: 'LeaseBrowse',
  data() {
    return {
      defaultImage,
      searchForm: {
        name: '',
        category: '',
        minPrice: null,
        maxPrice: null
      },
      filterForm: {
        status: '',
        sort: 'default'
      },
      pagination: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      equipmentList: [],
      categories: [
        { value: '工程机械', label: '工程机械' },
        { value: '运输设备', label: '运输设备' },
        { value: '生产设备', label: '生产设备' },
        { value: '农业机械', label: '农业机械' },
        { value: '控制系统', label: '控制系统' },
        { value: '清洁设备', label: '清洁设备' },
        { value: '电子设备', label: '电子设备' },
        { value: '医疗设备', label: '医疗设备' }
      ],
      detailDialogVisible: false,
      rentDialogVisible: false,
      currentEquipment: null,
      rentForm: {
        quantity: 1,
        startDate: new Date(new Date().setDate(new Date().getDate() + 1)),
        days: 7,
        phone: '',
        remark: ''
      },
      rentRules: {
        quantity: [
          { required: true, message: '请选择租赁数量', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择起租日期', trigger: 'change' }
        ],
        days: [
          { required: true, message: '请输入租赁天数', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      },
      startDateOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; // 不能选择今天之前的日期
        }
      }
    }
  },
  created() {
    this.loadEquipmentList();
  },
  methods: {
    loadEquipmentList() {
      // 模拟数据加载，实际项目中应该从后端获取
      this.equipmentList = [
        {
          id: 1,
          name: '大型挖掘机XC-300',
          category: '工程机械',
          dailyPrice: 2800,
          deposit: 20000,
          available: 5,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '大型挖掘机，适用于各种挖掘工作，挖掘深度可达10米，效率高，能源消耗低。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-05-15'
        },
        {
          id: 2,
          name: '工业级3D打印机P-500',
          category: '生产设备',
          dailyPrice: 1500,
          deposit: 15000,
          available: 3,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '高精度工业级3D打印机，支持多种材料打印，精度高达0.01mm，适合产品原型开发。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-06-01'
        },
        {
          id: 3,
          name: '自动化生产线控制系统',
          category: '控制系统',
          dailyPrice: 3500,
          deposit: 50000,
          available: 2,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '先进的自动化生产线控制系统，支持多达100个控制点，适合大型生产线的自动化改造。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-05-20'
        },
        {
          id: 4,
          name: '大型农用收割机H-100',
          category: '农业机械',
          dailyPrice: 2000,
          deposit: 18000,
          available: 8,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '大型农用收割机，适合小麦、水稻等作物收割，效率高，作业宽度达5米。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-05-10'
        },
        {
          id: 5,
          name: '工业清洗设备CW-50',
          category: '清洁设备',
          dailyPrice: 800,
          deposit: 5000,
          available: 0,
          status: '已租完',
          imageUrl: require('@/assets/images/default.png'),
          description: '工业级高压清洗设备，压力可达200bar，适合各种工业场所的清洁工作。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-06-05'
        },
        {
          id: 6,
          name: '中型装载机ZL50',
          category: '工程机械',
          dailyPrice: 1800,
          deposit: 15000,
          available: 3,
          status: '维修中',
          imageUrl: require('@/assets/images/default.png'),
          description: '中型装载机，载重5吨，适合各种物料装载工作，操作简便，维护成本低。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-05-25'
        },
        {
          id: 7,
          name: '小型叉车DC-25',
          category: '运输设备',
          dailyPrice: 500,
          deposit: 4000,
          available: 10,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '小型电动叉车，载重2.5吨，适合仓库、工厂等场所的货物搬运工作。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-06-08'
        },
        {
          id: 8,
          name: '激光切割机LC-1000',
          category: '生产设备',
          dailyPrice: 2500,
          deposit: 30000,
          available: 2,
          status: '可租',
          imageUrl: require('@/assets/images/default.png'),
          description: '高精度激光切割机，切割厚度可达10mm，适合各种金属材料的精密切割。',
          terms: '1. 租赁前需支付全额押金\n2. 租赁期间设备损坏由承租方负责\n3. 逾期未归还将收取额外费用',
          publishTime: '2023-05-28'
        }
      ];
      
      this.pagination.total = this.equipmentList.length;
    },
    handleSearch() {
      this.$message.success('搜索条件已应用');
      // 实际项目中应该根据搜索条件重新请求数据
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.$message.info('搜索条件已重置');
    },
    handleFilter() {
      this.$message.success('筛选条件已应用');
      // 实际项目中应该根据筛选条件重新请求数据
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      // 重新加载数据
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      // 重新加载数据
    },
    showDetail(item) {
      this.currentEquipment = item;
      this.detailDialogVisible = true;
    },
    handleRent(item) {
      this.currentEquipment = item;
      this.rentForm.quantity = 1;
      this.rentForm.days = 7;
      this.rentDialogVisible = true;
    },
    confirmRent(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('租赁申请已提交，请等待审核');
          this.rentDialogVisible = false;
          // 实际项目中应该将租赁信息提交到后端
        } else {
          this.$message.error('请完善租赁信息');
          return false;
        }
      });
    },
    addToFavorite() {
      this.$message.success('已添加到收藏');
    },
    calculateTotalRent() {
      if (!this.currentEquipment) return 0;
      return (this.currentEquipment.dailyPrice * this.rentForm.days * this.rentForm.quantity).toFixed(2);
    },
    calculateTotalDeposit() {
      if (!this.currentEquipment) return 0;
      return (this.currentEquipment.deposit * this.rentForm.quantity).toFixed(2);
    },
    calculateTotalAmount() {
      return (parseFloat(this.calculateTotalRent()) + parseFloat(this.calculateTotalDeposit())).toFixed(2);
    },
    getStatusClass(status) {
      switch (status) {
        case '可租': return 'status-available';
        case '已租完': return 'status-rented';
        case '维修中': return 'status-maintenance';
        default: return '';
      }
    },
    getStatusType(status) {
      switch (status) {
        case '可租': return 'success';
        case '已租完': return 'info';
        case '维修中': return 'warning';
        default: return 'info';
      }
    }
  }
}
</script>

<style scoped lang="scss">
.lease-browse-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .page-header {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-content {
      .title {
        font-size: 22px;
        color: #303133;
        margin: 0 0 10px 0;
      }
    }
  }

  .main-content {
    .search-card {
      margin-bottom: 20px;
    }

    .filter-section {
      background-color: #fff;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      .filter-group {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .filter-label {
          margin-right: 10px;
          color: #606266;
          white-space: nowrap;
        }
      }
    }

    .equipment-list {
      margin-bottom: 20px;

      .equipment-item {
        margin-bottom: 20px;
      }

      .equipment-card {
        cursor: pointer;
        transition: all 0.3s;
        height: 100%;
        display: flex;
        flex-direction: column;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .equipment-image {
          position: relative;
          height: 180px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
          }

          .equipment-status {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;

            &.status-available {
              background-color: #67c23a;
            }

            &.status-rented {
              background-color: #909399;
            }

            &.status-maintenance {
              background-color: #e6a23c;
            }
          }
        }

        .equipment-info {
          padding: 15px;
          flex-grow: 1;
          display: flex;
          flex-direction: column;

          .equipment-name {
            font-size: 16px;
            margin: 0 0 8px;
            color: #303133;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .equipment-category {
            font-size: 13px;
            color: #909399;
            margin-bottom: 8px;
          }

          .equipment-price {
            margin-bottom: 15px;

            .price-label {
              font-size: 14px;
              color: #606266;
            }

            .price-value {
              font-size: 18px;
              color: #f56c6c;
              font-weight: bold;
            }
          }

          .equipment-actions {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }

    .pagination-container {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 20px;
    }
  }

  .equipment-detail {
    .detail-image {
      width: 100%;
      height: 300px;
      object-fit: contain;
      background-color: #f5f7fa;
    }

    .detail-info {
      padding: 0 20px;

      .detail-name {
        font-size: 22px;
        color: #303133;
        margin: 0 0 20px 0;
      }

      .detail-item {
        margin-bottom: 15px;
        font-size: 14px;

        .detail-label {
          color: #909399;
          margin-right: 10px;
        }

        .price-value {
          font-size: 20px;
          color: #f56c6c;
          font-weight: bold;
        }
      }

      .detail-actions {
        margin-top: 30px;
        display: flex;
        gap: 15px;
      }
    }

    .detail-section {
      margin-top: 30px;
      border-top: 1px solid #ebeef5;
      padding-top: 20px;

      .section-title {
        font-size: 18px;
        color: #303133;
        margin: 0 0 15px 0;
      }

      .section-content {
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        white-space: pre-line;
      }
    }
  }

  .rent-summary {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .summary-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      &.total {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #dcdfe6;
        font-weight: bold;
        font-size: 16px;

        .summary-value {
          color: #f56c6c;
          font-size: 18px;
        }
      }

      .summary-label {
        color: #606266;
      }

      .summary-value {
        color: #303133;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .lease-browse-container {
    padding: 10px;

    .page-header {
      padding: 15px;
    }

    .filter-section {
      padding: 12px;
      gap: 10px;

      .filter-group {
        margin-right: 0;
        width: 100%;
      }
    }
  }
}
</style> 